/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { Link, browserHistory } from 'react-router' ;

//交互依赖
import NetworkEngine from '../../utils/NetworkEngine' ;
import UrlManager from '../../utils/UrlManager' ;

//images
import logo from "../../static/img/h5/logo.png";
import gantan from "../../static/img/h5/gantan.png";

class MobileModifyPswContainer1 extends Component{
    constructor(props){
        super(props) ;
    }
  /*  checkPhone() {
        let phone = this.refs.phone.value;
        var zhengzphone = /^1[34578]\d{9}$/;
        if(!zhengzphone.test(phone)||this.refs.phone.value === ""){
            $(this.refs.wrongError).show();
        } else {
            $(this.refs.wrongError).hide();
        }
    }*/
    sendPhone() {
        let param = this.refs.phone.value;
        let urlManager = new UrlManager();
        NetworkEngine(
            "post",
            urlManager.checkPhone(),
            {
                "phone": param,
                // "userId": sessionStorage.getItem('id'),
            }
        ).then(
            data => {
                let _data = data.data.data;
                if(_data==true) {
                    browserHistory.push(`/MobileModifyPsw2/${param}`)
                }else{
                    $(this.refs.wrongError).show();
                }
            }
        )
    }
    render(){
        return(
            <div className="login-form">
                <div className="logo"><img src={logo} alt="咪吱logo"/></div>
                <div className="container">
                    <p className="username binding-p">请输入手机号</p>
                    <div className="input-f">
                        <input type="text" className="input" ref="phone" placeholder="手机号"/>
                        <div className="re-error"  ref="wrongError">
                            <img src={gantan} alt="图标"/>
                            请填写正确的手机号
                        </div>
                    </div>
                    <button type="btn" onClick={this.sendPhone.bind(this)} className="form-btn orange-btn">下一步</button>
                </div>
            </div>
        )
    }
}

const MobileModifyPsw1 = connect()(MobileModifyPswContainer1) ;

export { MobileModifyPsw1 as default } ;
